<template>
  <div id="CEMSbarEchart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  props: {
    ID:{
      type: String,
    },
    CEMSbarObj: {
      type: Object,
      required: true,
      default: () => {
        return {
          name: ["售后待回收","售后待回收"],
          data: [1,2],
        };
      },
    },
  },
  data() {
    return {
      barChart: null,
    };
  },
  watch: {
    CEMSbarObj: {
      deep: true,
      handler(newVal) {
        this.barEchartfn();
      },
    },
  },
  mounted() {
    this.barEchartfn();
    let _this = this;
       _this.barChart.on("click",params=>{
        // console.log("params",params)
        if(params.name=="待采购单"){
          this.$tabs.open({
            text: '未采购商品明细',
            path: '/q_purchase_application_not_mx',
            query:{refresh:true}
          });
        }else if(params.name=="待入库单"){
          this.$tabs.open({
            text: '未入库商品明细',
            path: '/q_purchase_not_mx',
            query:{refresh:true}
          });
        }else if(params.name=="售后待回收单"){
          this.$tabs.open({
            text: '售后待回收旧件',
            path: '/q_after_recycle_not',
            query:{refresh:true}
          });
        }else if(params.name=="运维待回收单"){
          this.$tabs.open({
            text: '运维待回收旧件',
            path: '/q_operations_recycle_not',
            query:{refresh:true}
          });
        }
    })
    window.addEventListener("resize", function () {
      // console.log(" _this.barChart", _this.barChart)
      _this.barChart.resize();
    });
  },
  methods: {
    barEchartfn() {
      let _this = this;
      var bar = document.getElementById(this.ID);
      // var bar = document.getElementById("CEMSbarEchart");
      this.barChart = echarts.init(bar);
      var optionBar = {
        grid: {
          left: "10%",
          right: "5%",
          bottom: "15%",
          top:"20%",
        },
        // ---- legend ----
        legend: {
          type: "plain", // 图列类型，默认为 'plain'
          top: "1%", // 图列相对容器的位置 top\bottom\left\right
          right: "1%",
          textStyle: {
            // 图列内容样式
            color: "#000", // 字体颜色
            backgroundColor: "#fff", // 字体背景色
          },
          tooltip: {
            // 图列提示框，默认不显示
            show: false,
            color: "#fff",
          },
          data: [
            // 图列内容
            {
              // name: "在线",
              icon: "circle",
              textStyle: {
                color: "#fff", // 单独设置某一个图列的颜色
                backgroundColor: "rgba(0,0,0,0)", // 单独设置某一个图列的字体背景色
              },
            },
            // {
            //   name: "离线",
            //   icon: "circle",
            //   textStyle: {
            //     color: "#fff", // 单独设置某一个图列的颜色
            //     backgroundColor: "rgba(0,0,0,0)", // 单独设置某一个图列的字体背景色
            //   },
            // },
          ],
        },
        // ---  提示框 ----
        tooltip: {
          show: true, // 是否显示提示框，默认为true
          trigger: "item", // 数据项图形触发
          axisPointer: {
            // 指示样式
            type: "shadow",
            axis: "auto",
          },
          padding: 5,
          textStyle: {
            // 提示框内容的样式
            color: "#000",
          },
        },
        // ---- gird区域 ---
        //未确定位置
        // gird: {
        //   show: false, // 是否显示直角坐标系网格
        //   top: 80, // 相对位置 top\bottom\left\right
        //   containLabel: false, // gird 区域是否包含坐标轴的刻度标签
        //   tooltip: {
        //     show: true,
        //     trigger: "item", // 触发类型
        //     textStyle: {
        //       color: "#666",
        //     },
        //   },
        // },
        //  ------  X轴 ------
        xAxis: {
          show: true, // 是否显示
          position: "bottom", // x轴的位置
          offset: 0, // x轴相对于默认位置的偏移
          type: "category", // 轴类型， 默认为 'category'
          // name: "年",
          nameLocation: "end", // 轴名称相对位置
          nameTextStyle: {
            // 坐标轴名称样式
            color: "#83bff6",
            padding: [5, 0, 0, 0],
          },
          nameGap: 13, // 坐标轴名称与轴线之间的距离
          nameRotate: 0, // 坐标轴名字旋转
          axisLine: {
            // 坐标轴 轴线
            show: true, // 是否显示
            symbol: ["none", "arrow"], // 是否显示轴线箭头
            symbolSize: [8, 8], // 箭头大小
            symbolOffset: [0, 7], // 箭头位置
            // ------   线 ---------
            lineStyle: {
              color: "#2378f7",
              width: 1,
              type: "solid",
            },
          },
          axisTick: {
            // 坐标轴 刻度
            show: false, // 是否显示
            inside: true, // 是否朝内
            length: 3, // 长度
            lineStyle: {
              // 默认取轴线的样式
              color: "#fff",
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            // 坐标轴标签
            show: true, // 是否显示
            inside: false, // 是否朝内
            rotate: 0, // 旋转角度
            margin: 5, // 刻度标签与轴线之间的距离
            color: "#83bff6", // 默认取轴线的颜色
          },
          splitLine: {
            // gird区域中的分割线
            show: false, // 是否显示
            lineStyle: {},
          },
          splitArea: {
            // 网格区域
            show: false, // 是否显示，默认为false
          },
          data: this.CEMSbarObj.name,
        },
        //   ------   y轴  ----------
        yAxis: {
          min: 0, //取0为最小刻度
          // max: 100,
          show: true, // 是否显示
          position: "left", // y轴位置
          offset: 0, // y轴相对于默认位置的偏移
          type: "value", // 轴类型，默认为 ‘category’
          name: "单        ", // 轴名称
          nameLocation: "end", // 轴名称相对位置value
          nameTextStyle: {
            // 坐标轴名称样式
            color: "#83bff6",
            padding: [5, 0, 0, 0], // 坐标轴名称相对位置
          },
          nameGap: 12, // 坐标轴名称与轴线之间的距离
          nameRotate: 0, // 坐标轴名字旋转

          axisLine: {
            // 坐标轴 轴线
            show: true, // 是否显示
            //  -----   箭头 -----
            symbol: ["none", "arrow"], // 是否显示轴线箭头
            symbolSize: [8, 8], // 箭头大小
            symbolOffset: [0, 7], // 箭头位置

            // ----- 线 -------
            lineStyle: {
              color: "#2378f7",
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            // 坐标轴的标签
            show: true, // 是否显示
            inside: false, // 是否朝内
            rotate: 0, // 旋转角度
            margin: 8, // 刻度标签与轴线之间的距离
            color: "#83bff6", // 默认轴线的颜色
              
          },
          splitLine: {
            // gird 区域中的分割线
            show: true, // 是否显示
            lineStyle: {
              color: "#188df0",
              width: 1,
              type: "dashed",
            },
          },
          splitArea: {
            // 网格区域
            show: false, // 是否显示，默认为false
          },
        },
        series: [
          {
            // name: "在线", // 序列名称
            type: "bar", // 类型
            barGap: 0,
            legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
            label: {
              show: true,
              position: "top",
              rotate: 0,
              color: "#474747",
              formatter: (params) => {
                return params.value+" (单)";
              },
            },
            barWidth: 30, // 柱形的宽度
            barCategoryGap: "20%", // 柱形的间距
            data: this.CEMSbarObj.data,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0.5, color: "#0452e6" },
                { offset: 1, color: "#3485fb" },
                { offset: 1, color: "#2d8cf0" },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 1, color: "#188df0" },
                  { offset: 1, color: "#3485fb" },
                  { offset: 1, color: "#202476" },
                ]),
              },
            },
          },
          // {
          //   // name: "离线",
          //   type: "bar",
          //   barGap: 0,
          //   legendHoverLink: true,
          //   label: {
          //     show: true,
          //     position: "top",
          //     rotate: 0,
          //     color: "#eee",
          //     formatter: (params) => {
          //       return params.value == 0 ? "" : params.value;
          //     },
          //   },
          //   barWidth: 20,
          //   barCategoryGap: "20%",
          //   data: [1,2,3,4,5,6,7],
          //   itemStyle: {
          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //       { offset: 0.5, color: "#fd4f27" },
          //       { offset: 1, color: "#fe9248" },
          //       { offset: 1, color: "#ff0000" },
          //     ]),
          //   },
          //   emphasis: {
          //     itemStyle: {
          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //         { offset: 1, color: "#ff0000" },
          //         { offset: 1, color: "#fe9248" },
          //         { offset: 1, color: "#fd4f27" },
          //       ]),
          //     },
          //   },
          // },
        ],
      };
      optionBar && this.barChart.setOption(optionBar);
    },
  },
};
</script>
<style scoped>
#CEMSbarEchart {
  width: 100%;
  height: 100%;
}
</style>
